<template>
    <el-card id="body">
        <div class="title">个人信息</div>
        <el-divider></el-divider>
        <el-upload
                class="avatar-uploader"
                :action='uploadUrl'
                :show-file-list="false"
                :on-error="uploadError"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">

        <el-avatar shape="square" :size="100" :fit="fit" :src="userMessage.avatarUrl" >
        </el-avatar>
        </el-upload>

        <el-divider></el-divider>
        <div>
            <span class="el-icon-user-solid">用户名</span>
            <span class="answer">{{user.userName}}</span>
        </div>
        <el-divider></el-divider>
        <div>
            <span class="el-icon-s-custom">昵称</span>
            <span class="answer">{{user.realName}}</span>
        </div>
        <el-divider></el-divider>
        <div>
            <span class="el-icon-message">电子邮件</span>
            <span class="answer">{{user.email}}</span>
        </div>
        <el-divider></el-divider>
        <div>
            <span class="el-icon-phone">电话</span>
            <span class="answer">{{user.phoneNumber}}</span>
        </div>
        <el-divider></el-divider>
        <div>
            <span class="el-icon-date">创建时间</span>
            <span class="answer">{{user.createDate}}</span>
        </div>
        <el-divider></el-divider>
        <div>
            <span class="el-icon-date">上次登录</span>
            <span class="answer">{{user.lastLogin}}</span>
        </div>
        <el-divider></el-divider>
    </el-card>
</template>

<script>
    import { Message} from 'element-ui'
    import * as user from '../../api/user'
    import * as userMessage from '../../api/userMessages'
    export default {
        name: "leftCard",
        data(){
            return{
                userMessage:{},
                fit: 'contain',
                uploadUrl: '/api/file/upload',
                user:{
                }
            }
        },
        methods:{
            handleAvatarSuccess(response) {
                this.userMessage.avatarUrl = response.data
                userMessage.updateOneMessages(this.userMessage)
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            uploadError(){
                // err, file, fileList
               Message.error("文件上传失败")
            }
        },
        created() {
            let that =this
            user.getOneUser(this.$store.getters.getUserName).then(function (response) {
                that.user= response.data.data
            })
            userMessage.getOneMessages(this.$store.getters.getUserName).then(function (response) {
                that.userMessage=response.data.data
            })
        }

    }
</script>

<style scoped>
    .answer{
        float:right
    }
    .title{
        text-align:center
    }
    .avatar-uploader{
      position: relative;
        left: 45%;
    }
</style>
